<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>实名认证</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .recharge-area{
            height: auto;
            width: 90%;
            margin: auto;
        }
        .recharge-area ul li {
            position: relative;
            height: 1.2rem;
            width: 100%;
            border-bottom: 1px solid #e3e3e3;
        }
        .li-type {
            line-height: 1.6rem;
            display: block;
            color: #666;
            font-size: 0.28rem;
            height: 100%;
            width: 18%;
            left: 0;
        }
        .input-area {
            background-color: transparent;
            font-size: 0.28rem;
            width: 72%;
            position: absolute;
            right: 0px;
            bottom: 0.15rem;
            height: 0.5rem;
            outline: none;
        }
        .realName-btn-area{width: 50%;height: 0.8rem;margin:1rem  auto}
        .realName-btn{
            height: 100%;
            width: 100%;
            background-color: #F23A38;
            border-radius: 10px;
            outline: none;
            color: white;
            font-size: 0.28rem;
        }
        /*实名认证*/
        .upload-user-img{
            margin-top: 0.3rem;
            height: 2rem;
            width: 100%;
            margin-bottom: 0.15rem;
        }
        .back-img,.back-imgOne,.back-imgTwo{
            position: absolute;
            width: 2rem;
            height: 2rem;
            left: 0px;
            top: 0px;
        }
        .upload-left {
            width: 30%;
            height: 100%;
            float: left;
            margin: 0 1.6%;
        }
        /*上传图片*/
        #logo-container ,#logo-containerOne,#logo-containerTwo{
            margin: auto;
            overflow: hidden;
            height: 2rem;
            width: 2rem;
            position: relative;
            border: 1px solid transparent;
            border-image: initial;
            text-align: center;
            line-height: 2rem;
            font-size: 0.28rem;
            color: #666;
        }
        #logo-container input ,#logo-containerOne input,
        #logo-containerTwo input{
            margin: -2px;
            height: 2rem;
            width: 2rem;
            opacity: 0;
            position: absolute;
            z-index: 200;
        }
        .img-font-class{
            width: 100%;
            height: 0.5rem;
        }
        .img-font-class span{
            display: inline-block;
            font-size: 0.25rem;
            color: #666;
            line-height: 0.5rem;
            width: 32.6%;
            text-align: center;
        }
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>实名认证</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="recharge-area">
        <ul>
            <li>
                <span class="li-type">真实姓名</span>
                <input class="input-area" type="text" placeholder="请输入您的真实姓名">
            </li>
            <li>
                <span class="li-type">身份证号</span>
                <input class="input-area" type="text" placeholder="请输入您的身份证号">
            </li>
        </ul>
        <div class="upload-user-img">
            <div class="upload-left">
                <div id="logo-container">
                    <input class="input-img-btn" accept="image/png,image/gif" type="file">
                    <img class="back-img" src="" id="img0" alt="">
                    <span>点击上传</span>
                </div>
            </div>
            <div class="upload-left">
                <div id="logo-containerOne">
                    <input class="input-img-btnOne" accept="image/png,image/gif" type="file">
                    <img class="back-imgOne" src="" id="img1" alt="">
                    <span>点击上传</span>
                </div>
            </div>
            <div class="upload-left">
                <div id="logo-containerTwo">
                    <input class="input-img-btnTwo" accept="image/png,image/gif" type="file">
                    <img class="back-imgTwo" src="" id="img2" alt="">
                    <span>点击上传</span>
                </div>
            </div>
        </div>
        <div class="img-font-class">
            <span>身份证正面照片</span>
            <span>身份证反面照片</span>
            <span>手持身份证照片</span>
        </div>
        <div class="realName-btn-area">
            <button class="realName-btn">提交</button>
        </div>
    </div>
</div>
<script src="../../lib/jquery/jquery.min.js"></script>
<script src="../../lib/upload/uploadPreview.min.js"></script>
<script src="../../lib/upload/uploadPreview.js"></script>
<script>
    $(document).ready(function () {
        // 图片预览
        $(".file-path").on("change",function() {
            var srcAll = getObjectURL(this.files[0]);   //获取路径
            $(this).siblings('.add-img').addClass('hide');  //this指的是input
            $(this).siblings(".back-pic").show();
            $(this).parent(".pictures-one").css("border","none");
            $(this).parent().next().children('.add-img').removeClass('hide');
            $(this).parent().next().children('.file-path').removeAttr('disabled');
            $(this).nextAll(".back-pic").attr("src",srcAll);
        });
//        正面
        $(".input-img-btn").change(function(){
            var objUrl = getObjectURL(this.files[0]) ;
            if (objUrl) {
                $("#img0").attr("src", objUrl);
            }
            $("#add-img-btn").addClass('hide');
            $("#logo-container").css("border","none");
        });
//        反面
        $(".input-img-btnOne").change(function(){
            var objUrl = getObjectURL(this.files[0]) ;
            if (objUrl) {
                $("#img1").attr("src", objUrl);
            }
            $("#add-img-btnOne").addClass('hide');
            $("#logo-containerOne").css("border","none");

        });
//        手持
        $(".input-img-btnTwo").change(function(){
            var objUrl = getObjectURL(this.files[0]) ;
            if (objUrl) {
                $("#img2").attr("src", objUrl);
            }
            $("#add-img-btnTwo").addClass('hide');
            $("#logo-containerTwo").css("border","none");

        });
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL !== undefined) {
                url = window.createObjectURL(file)
            } else if (window.URL !== undefined) {
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL !== undefined) {
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        };
    });
</script>

</body>
</html>